<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程列表 - 护工助手</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/training.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3159099_1wqzwg0e9ck.css">
    <style>
        .filter-bar {
            background-color: var(--bg-white);
            padding: var(--spacing-md);
            display: flex;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 90;
            box-shadow: var(--shadow-sm);
        }
        
        .filter-item {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: var(--text-secondary);
        }
        
        .filter-item i {
            margin-left: 4px;
            font-size: 12px;
        }
        
        .course-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--spacing-md);
            padding: var(--spacing-md);
        }
        
        .course-grid-item {
            background-color: var(--bg-white);
            border-radius: var(--radius-md);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }
        
        .course-grid-img {
            height: 100px;
            position: relative;
        }
        
        .course-grid-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .course-tag {
            position: absolute;
            top: 8px;
            left: 8px;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 10px;
        }
        
        .course-grid-info {
            padding: var(--spacing-sm);
        }
        
        .course-grid-info h3 {
            margin: 0 0 4px;
            font-size: 14px;
            font-weight: 500;
            line-height: 1.3;
            height: 36px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        
        .course-meta-grid {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: var(--text-light);
            margin-top: 4px;
        }
        
        .course-rating {
            display: flex;
            align-items: center;
        }
        
        .rating-stars {
            color: var(--warning-color);
            margin-right: 2px;
        }
        
        .category-tabs {
            display: flex;
            overflow-x: auto;
            background-color: var(--bg-white);
            padding: 0 var(--spacing-md);
            margin-bottom: var(--spacing-md);
            box-shadow: var(--shadow-sm);
        }
        
        .category-tabs::-webkit-scrollbar {
            display: none;
        }
        
        .category-tab {
            padding: var(--spacing-md) var(--spacing-sm);
            white-space: nowrap;
            font-size: 14px;
            color: var(--text-secondary);
        }
        
        .category-tab.active {
            color: var(--primary-color);
            font-weight: 600;
            position: relative;
        }
        
        .category-tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 8px;
            right: 8px;
            height: 3px;
            background-color: var(--primary-color);
            border-radius: 3px 3px 0 0;
        }
        
        .empty-state {
            text-align: center;
            padding: var(--spacing-xl) var(--spacing-md);
            color: var(--text-light);
        }
        
        .empty-icon {
            font-size: 48px;
            margin-bottom: var(--spacing-md);
            color: var(--border-color);
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 顶部状态栏 -->
        <header class="app-header">
            <div class="status-bar">
                <span class="time">14:25</span>
                <div class="status-icons">
                    <span class="icon-wifi"></span>
                    <span class="icon-signal"></span>
                    <span class="icon-battery">80%</span>
                </div>
            </div>
            <div class="header-content">
                <a href="training.html" class="back-btn">
                    <i class="icon-back"></i>
                </a>
                <h1>全部课程</h1>
                <div class="header-actions">
                    <a href="#" class="icon-search"></a>
                </div>
            </div>
        </header>

        <!-- 分类标签页 -->
        <div class="category-tabs">
            <div class="category-tab active">全部</div>
            <div class="category-tab">基础护理</div>
            <div class="category-tab">专科护理</div>
            <div class="category-tab">急救技能</div>
            <div class="category-tab">心理关怀</div>
            <div class="category-tab">营养膳食</div>
            <div class="category-tab">康复训练</div>
            <div class="category-tab">沟通技巧</div>
        </div>

        <!-- 筛选栏 -->
        <div class="filter-bar">
            <div class="filter-item">
                综合排序 <i class="icon-down"></i>
            </div>
            <div class="filter-item">
                最新 <i class="icon-down"></i>
            </div>
            <div class="filter-item">
                筛选 <i class="icon-filter"></i>
            </div>
        </div>

        <!-- 课程网格 -->
        <div class="course-grid">
            <div class="course-grid-item">
                <div class="course-grid-img">
                    <img src="images/course1.jpg" alt="老年人心理健康关怀">
                    <span class="course-tag">必修</span>
                </div>
                <div class="course-grid-info">
                    <h3>老年人心理健康关怀</h3>
                    <div class="course-meta-grid">
                        <span>2.5小时</span>
                        <div class="course-rating">
                            <span class="rating-stars">★★★★★</span>
                            <span>4.9</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="course-grid-item">
                <div class="course-grid-img">
                    <img src="images/course2.jpg" alt="糖尿病患者护理">
                    <span class="course-tag">专业</span>
                </div>
                <div class="course-grid-info">
                    <h3>糖尿病患者护理与血糖监测</h3>
                    <div class="course-meta-grid">
                        <span>2.5小时</span>
                        <div class="course-rating">
                            <span class="rating-stars">★★★★★</span>
                            <span>4.9</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="course-grid-item">
                <div class="course-grid-img">
                    <img src="images/course3.jpg" alt="中风康复护理">
                </div>
                <div class="course-grid-info">
                    <h3>中风康复护理与日常训练</h3>
                    <div class="course-meta-grid">
                        <span>3小时</span>
                        <div class="course-rating">
                            <span class="rating-stars">★★★★☆</span>
                            <span>4.8</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="course-grid-item">
                <div class="course-grid-img">
                    <img src="images/course4.jpg" alt="老年人跌倒预防">
                    <span class="course-tag">必修</span>
                </div>
                <div class="course-grid-info">
                    <h3>老年人跌倒预防与家庭环境改造</h3>
                    <div class="course-meta-grid">
                        <span>1.5小时</span>
                        <div class="course-rating">
                            <span class="rating-stars">★★★★☆</span>
                            <span>4.7</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="course-grid-item">
                <div class="course-grid-img">
                    <img src="images/course5.jpg" alt="老年人营养膳食">
                </div>
                <div class="course-grid-info">
                    <h3>老年人营养膳食搭配与制作</h3>
                    <div class="course-meta-grid">
                        <span>2小时</span>
                        <div class="course-rating">
                            <span class="rating-stars">★★★★★</span>
                            <span>4.9</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="course-grid-item">
                <div class="course-grid-img">
                    <img src="images/course6.jpg" alt="褥疮预防与护理">
                    <span class="course-tag">专业</span>
                </div>
                <div class="course-grid-info">
                    <h3>褥疮预防与护理技巧</h3>
                    <div class="course-meta-grid">
                        <span>2.5小时</span>
                        <div class="course-rating">
                            <span class="rating-stars">★★★★★</span>
                            <span>4.9</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="course-grid-item">
                <div class="course-grid-img">
                    <img src="images/course7.jpg" alt="心肺复苏急救技能">
                    <span class="course-tag">急救</span>
                </div>
                <div class="course-grid-info">
                    <h3>心肺复苏急救技能培训</h3>
                    <div class="course-meta-grid">
                        <span>3小时</span>
                        <div class="course-rating">
                            <span class="rating-stars">★★★★★</span>
                            <span>5.0</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="course-grid-item">
                <div class="course-grid-img">
                    <img src="images/course8.jpg" alt="老年人用药安全">
                </div>
                <div class="course-grid-info">
                    <h3>老年人用药安全与管理</h3>
                    <div class="course-meta-grid">
                        <span>2小时</span>
                        <div class="course-rating">
                            <span class="rating-stars">★★★★☆</span>
                            <span>4.8</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="course-grid-item">
                <div class="course-grid-img">
                    <img src="images/course9.jpg" alt="失智老人照护">
                    <span class="course-tag">专业</span>
                </div>
                <div class="course-grid-info">
                    <h3>失智老人照护与沟通技巧</h3>
                    <div class="course-meta-grid">
                        <span>4小时</span>
                        <div class="course-rating">
                            <span class="rating-stars">★★★★★</span>
                            <span>4.9</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="course-grid-item">
                <div class="course-grid-img">
                    <img src="images/course10.jpg" alt="肠造口护理">
                </div>
                <div class="course-grid-info">
                    <h3>肠造口护理与日常维护</h3>
                    <div class="course-meta-grid">
                        <span>2.5小时</span>
                        <div class="course-rating">
                            <span class="rating-stars">★★★★☆</span>
                            <span>4.7</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="course-grid-item">
                <div class="course-grid-img">
                    <img src="images/course11.jpg" alt="康复辅具使用">
                    <span class="course-tag">康复</span>
                </div>
                <div class="course-grid-info">
                    <h3>康复辅具使用与训练指导</h3>
                    <div class="course-meta-grid">
                        <span>3小时</span>
                        <div class="course-rating">
                            <span class="rating-stars">★★★★☆</span>
                            <span>4.8</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="course-grid-item">
                <div class="course-grid-img">
                    <img src="images/course12.jpg" alt="护工职业素养">
                    <span class="course-tag">必修</span>
                </div>
                <div class="course-grid-info">
                    <h3>护工职业素养与服务礼仪</h3>
                    <div class="course-meta-grid">
                        <span>1.5小时</span>
                        <div class="course-rating">
                            <span class="rating-stars">★★★★★</span>
                            <span>4.9</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <nav class="bottom-nav">
            <a href="index.html" class="nav-item">
                <i class="nav-icon icon-home"></i>
                <span>首页</span>
            </a>
            <a href="schedule.html" class="nav-item">
                <i class="nav-icon icon-schedule"></i>
                <span>排班</span>
            </a>
            <a href="training.html" class="nav-item active">
                <i class="nav-icon icon-training"></i>
                <span>培训</span>
            </a>
            <a href="profile.html" class="nav-item">
                <i class="nav-icon icon-profile"></i>
                <span>我的</span>
            </a>
        </nav>
    </div>

    <script src="js/common.js"></script>
    <script>
        // 分类标签切换
        document.querySelectorAll('.category-tab').forEach(tab => {
            tab.addEventListener('click', function() {
                document.querySelector('.category-tab.active').classList.remove('active');
                this.classList.add('active');
                // 这里可以添加加载对应分类课程的逻辑
            });
        });
        
        // 课程点击跳转
        document.querySelectorAll('.course-grid-item').forEach(item => {
            item.addEventListener('click', function() {
                window.location.href = 'course-detail.html';
            });
        });
    </script>
</body>
</html> 